<template>
	<view class="page">
		<!-- 顶部滚动视图开始 -->
		<view class="classify_scrollx">
			<scroll-view scroll-x="true" class="scroll-view">
				<view class="segmented-wrap">
					<uni-segmented-control 
					:current="current" 
					:values="classify" 
					@clickItem="onClickItem"
					styleType="text"
					activeColor="#64C9C1">						
					</uni-segmented-control>
				</view>
			</scroll-view>
		</view>
		<!-- 顶部滚动视图结束 -->
		
		<!-- 切换视图按钮开始 -->
		<view class="btnBox" >
			<button @click="toggleView()" class="changeBtn"
			style="color:#ffffff;
			backgroundColor:#99e6e6;
			borderColor:#aaffff">
				切换视图		</button>
		</view>						
		<!-- 切换视图按钮结束 -->
		
		<!-- 标签页内容开始 -->
		<view class="content">
			
			<view v-if="current === 0">
				<!-- 所有内容开始 -->			
				<view v-if="!isListView" class="list-view" >
					<!-- 医生列表开始 -->
					<view class="doctorList">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-list>
									<uni-list-item v-for="(item, index) in data" >
										<template v-slot:header>
											<view class="slot-box">
												<image class="slot-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										</template>
										<template v-slot:body>
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										    <view class="department">					      
										      <text>职称 | {{ item.position }}</text>
											  <text>主治 | {{ item.goodAt }}</text>
										    </view>
										    <view class="price">						     
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  </template>
									</uni-list-item>
								</uni-list>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生列表结束 -->
				</view>
				<view v-else class="grid-view" >
					<!-- 医生宫格开始 -->
					<view class="doctorGrid">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-grid column="2" :square="false" :show-border="false">
									<uni-grid-item v-for="(item, index) in data" >
										<!-- <template v-slot:header> -->
											<view class="grid-box">
												<image class="box-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										<!-- </template> -->
										<!-- <template v-slot:body> -->
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										   <view class="department">
										     <text>职称 | {{ item.position }}</text>
										     <text>主治 | {{ item.goodAt }}</text>
										   </view>
										    <view class="price">
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  <!-- </template> -->
									</uni-grid-item>
								</uni-grid>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生宫格结束 -->
				</view>
				<!-- 所有内容结束 -->
			</view>
			
			<view v-if="current === 1">
				<!-- 内科内容开始 -->
				<view v-if="!isListView" class="list-view" >
					<!-- 医生列表开始 -->
					<view class="doctorList">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information"
						 where="department=='内科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-list>
									<uni-list-item v-for="(item, index) in data" >
										<template v-slot:header>
											<view class="slot-box">
												<image class="slot-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										</template>
										<template v-slot:body>
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										    <view class="department">					      
										      <text>职称 | {{ item.position }}</text>
											  <text>主治 | {{ item.goodAt }}</text>
										    </view>
										    <view class="price">						     
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  </template>
									</uni-list-item>
								</uni-list>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生列表结束 -->
				</view>
				<view v-else class="grid-view" >
					<!-- 医生宫格开始 -->
					<view class="doctorGrid">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information"
						where="department=='内科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-grid column="2" :square="false" :show-border="false">
									<uni-grid-item v-for="(item, index) in data" >
										<!-- <template v-slot:header> -->
											<view class="grid-box">
												<image class="box-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										<!-- </template> -->
										<!-- <template v-slot:body> -->
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										   <view class="department">
										     <text>职称 | {{ item.position }}</text>
										     <text>主治 | {{ item.goodAt }}</text>
										   </view>
										    <view class="price">
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  <!-- </template> -->
									</uni-grid-item>
								</uni-grid>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生宫格结束 -->
				</view>
				<!-- 内科内容结束 -->
			</view>
			<view v-if="current === 2">
				<!-- 外科内容开始 -->
				<view v-if="!isListView" class="list-view" >
					<!-- 医生列表开始 -->
					<view class="doctorList">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information" 
						where="department=='外科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-list>
									<uni-list-item v-for="(item, index) in data" >
										<template v-slot:header>
											<view class="slot-box">
												<image class="slot-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										</template>
										<template v-slot:body>
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										    <view class="department">					      
										      <text>职称 | {{ item.position }}</text>
											  <text>主治 | {{ item.goodAt }}</text>
										    </view>
										    <view class="price">						     
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  </template>
									</uni-list-item>
								</uni-list>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生列表结束 -->
				</view>
				<view v-else class="grid-view" >
					<!-- 医生宫格开始 -->
					<view class="doctorGrid">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information"
						where="department=='外科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-grid column="2" :square="false" :show-border="false">
									<uni-grid-item v-for="(item, index) in data" >
										<!-- <template v-slot:header> -->
											<view class="grid-box">
												<image class="box-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										<!-- </template> -->
										<!-- <template v-slot:body> -->
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										   <view class="department">
										     <text>职称 | {{ item.position }}</text>
										     <text>主治 | {{ item.goodAt }}</text>
										   </view>
										    <view class="price">
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  <!-- </template> -->
									</uni-grid-item>
								</uni-grid>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生宫格结束 -->
				</view>
				<!-- 外科内容结束 -->
			</view>
			<view v-if="current === 3">
				<!-- 儿科内容开始 -->
				<view v-if="!isListView" class="list-view" >
					<!-- 医生列表开始 -->
					<view class="doctorList">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information" 
						where="department=='儿科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-list>
									<uni-list-item v-for="(item, index) in data" >
										<template v-slot:header>
											<view class="slot-box">
												<image class="slot-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										</template>
										<template v-slot:body>
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										    <view class="department">					      
										      <text>职称 | {{ item.position }}</text>
											  <text>主治 | {{ item.goodAt }}</text>
										    </view>
										    <view class="price">						     
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  </template>
									</uni-list-item>
								</uni-list>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生列表结束 -->
				</view>
				<view v-else class="grid-view" >
					<!-- 医生宫格开始 -->
					<view class="doctorGrid">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information"
						where="department=='儿科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-grid column="2" :square="false" :show-border="false">
									<uni-grid-item v-for="(item, index) in data" >
										<!-- <template v-slot:header> -->
											<view class="grid-box">
												<image class="box-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										<!-- </template> -->
										<!-- <template v-slot:body> -->
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										   <view class="department">
										     <text>职称 | {{ item.position }}</text>
										     <text>主治 | {{ item.goodAt }}</text>
										   </view>
										    <view class="price">
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  <!-- </template> -->
									</uni-grid-item>
								</uni-grid>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生宫格结束 -->
				</view>
				<!-- 儿科内容结束 -->
			</view>
			<view v-if="current === 4">
				<!-- 妇产科内容开始 -->
				<view v-if="!isListView" class="list-view" >
					<!-- 医生列表开始 -->
					<view class="doctorList">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information" 
						where="department=='妇产科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-list>
									<uni-list-item v-for="(item, index) in data" >
										<template v-slot:header>
											<view class="slot-box">
												<image class="slot-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										</template>
										<template v-slot:body>
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										    <view class="department">					      
										      <text>职称 | {{ item.position }}</text>
											  <text>主治 | {{ item.goodAt }}</text>
										    </view>
										    <view class="price">						     
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  </template>
									</uni-list-item>
								</uni-list>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生列表结束 -->
				</view>
				<view v-else class="grid-view" >
					<!-- 医生宫格开始 -->
					<view class="doctorGrid">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information"
						where="department=='妇产科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-grid column="2" :square="false" :show-border="false">
									<uni-grid-item v-for="(item, index) in data" >
										<!-- <template v-slot:header> -->
											<view class="grid-box">
												<image class="box-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										<!-- </template> -->
										<!-- <template v-slot:body> -->
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										   <view class="department">
										     <text>职称 | {{ item.position }}</text>
										     <text>主治 | {{ item.goodAt }}</text>
										   </view>
										    <view class="price">
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  <!-- </template> -->
									</uni-grid-item>
								</uni-grid>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生宫格结束 -->
				</view>
				<!-- 妇产科内容结束 -->
			</view>
			<view v-if="current === 5">
				<!-- 急诊科内容开始 -->
				<view v-if="!isListView" class="list-view" >
					<!-- 医生列表开始 -->
					<view class="doctorList">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information" 
						where="department=='急诊科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-list>
									<uni-list-item v-for="(item, index) in data" >
										<template v-slot:header>
											<view class="slot-box">
												<image class="slot-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										</template>
										<template v-slot:body>
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										    <view class="department">					      
										      <text>职称 | {{ item.position }}</text>
											  <text>主治 | {{ item.goodAt }}</text>
										    </view>
										    <view class="price">						     
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  </template>
									</uni-list-item>
								</uni-list>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生列表结束 -->
				</view>
				<view v-else class="grid-view" >
					<!-- 医生宫格开始 -->
					<view class="doctorGrid">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor-information"
						where="department=='急诊科'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-grid column="2" :square="false" :show-border="false">
									<uni-grid-item v-for="(item, index) in data" >
										<!-- <template v-slot:header> -->
											<view class="grid-box">
												<image class="box-image" :src="item.doctorImage.url" mode="widtnFix"></image>
											</view>
										<!-- </template> -->
										<!-- <template v-slot:body> -->
										    <view class="doctorName">
										      <text>{{item.doctorName}}</text>
										    </view>
										   <view class="department">
										     <text>职称 | {{ item.position }}</text>
										     <text>主治 | {{ item.goodAt }}</text>
										   </view>
										    <view class="price">
										      <text class="Price"> ¥ {{ getYuan(item.price) }}</text>
										    </view>
										  <!-- </template> -->
									</uni-grid-item>
								</uni-grid>
							</view>
						</unicloud-db>
					</view>
					<!-- 医生宫格结束 -->
				</view>
				<!-- 急诊科内容结束 -->
			</view>
		</view>
		<!-- 标签页内容结束 -->
	</view>	
</template>

<script>
	export default {
		
		
		data() {
			return {
				classify:["所有","内科","外科","儿科","妇产科","急诊科"],
				current:0,
				
				isListView: false, // 初始化为false，表示默认显示列表视图
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
			}
		},

		methods: {
			toggleView(){
				this.isListView = !this.isListView
			},
			 getYuan(data){
				let yuan = Math.floor(data / 100)
				let fen = data % 100
				if(fen == 0) fen = "00"
				return yuan+'.'+fen
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			goToGridPage(){
				uni.navigateTo({
					url:'/pages/grid/grid'
				})
			},		
		},
	}
</script>

<style>
	.page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color:#eee;
		min-height: 100%;
		height: auto;
	}
	.classify_scrollx {
		background-color: #FFFFFF;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
	}
	.scroll-view {
		white-space: nowrap;
		height: 100rpx;
		line-height: 100rpx;
		width: 100%;
	}
	.segmented-wrap{
		display: inline-block;
		margin-top: 8rpx;
		padding: 0 10rpx;
	}
	.slot-box {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	.slot-image {
	  display: block;
	  margin-right: 10px;
	  width: 200rpx;
	  height: 200rpx;
	}
	.doctorName{
	  font-size: 30rpx;
	  display: -webkit-box;
	  line-height: 1.5em;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  margin-bottom: 5rpx;
	}
	.department{
	  font-size: 24rpx;
	  white-space: nowrap; /* 禁止换行 */
	  overflow: hidden; /* 隐藏溢出内容 */
	  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	  word-break: break-all; /* 允许在单词内换行 */
	  margin-bottom: 10rpx;
	  color: #666666;
	}
	.price {
	  display: flex;
	  flex-direction: row;
	  line-height: 40rpx;
	}
	.grid-view {
		padding: 10px;
		/* 外边距 */
		background-color: #f9f9f9;
		/* 背景色 */
	}
	
	.grid-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 使内容居中对齐 */
		background-color: white;
		/* 可选：为每个宫格添加背景色 */
		border-radius: 10px;
		/* 可选：添加圆角 */
		padding: 10px;
		/* 可选：为每个宫格添加内边距 */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		/* 可选：添加阴影效果 */
	}
	.box-image {
		display: block;
		margin-right: 10px;
		width: 300rpx;
		height: 300rpx;
	}
	
</style>
